import { ScrollView, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import React, { FC, useState } from "react";
import styles from "./index.module.scss";
interface P {
  list: any[];
  renderCell?(r: any): React.ReactNode;
  contentClass?: string;
}
const Indexes: FC<P> = props => {
  let [curIndex, setCurIndex] = useState("");
  return (
    <View className={styles.wrap}>
      <View className={styles.listIndex}>
        {props.list.map((item, i) => {
          return (
            <View
              className={styles.listIndexItem}
              onClick={() => {
                Taro.showToast({
                  title: item.title,
                  icon: "none",
                });
                setCurIndex(`I_${i}`);
                setTimeout(() => {
                  setCurIndex(``);
                });
              }}
            >
              {item.title}
            </View>
          );
        })}
      </View>
      <ScrollView className={styles.content} scrollIntoView={curIndex} scrollY>
        {props.list.map((item, i) => {
          return (
            <View id={`I_${i}`}>
              <View className={styles.contentHeader}>{item.title}</View>
              <View className={props.contentClass}>
                {item.items.map(children => {
                  return props.renderCell ? props.renderCell(children) : <View>{children.name}</View>;
                })}
              </View>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
};

export default Indexes;
